import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'


let camera, scene, renderer
let ground, object
let spotLight, dirLight
let material

initRenderer()

initScene()
initAxesHelper()
initMeshes()
initLight()

initCamera()
initControls()
enableShadow()

enableClipping()

animate()

window.addEventListener('resize', onWindowResize);

function initRenderer(params) {
    renderer = new THREE.WebGL1Renderer({ antialias: true,  });
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)
}

function initScene(params) {
    scene = new THREE.Scene()
    scene.background = new THREE.Color(0x999999)
}

function initAxesHelper(params) {
    const axisHelper = new THREE.AxesHelper(1)
    scene.add(axisHelper)
}

function initMeshes(params) {
    //地面
    // ground = new THREE.MeshBasicMaterial(
    //     new THREE.PlaneGeometry(9, 9, 1, 1),
    //     new THREE.MeshPhongMaterial({color:0xa0adaf,shininess:150})
    // )
    const groundGeometry = new THREE.PlaneGeometry(9, 9, 1, 1);
    const groundMaterial = new THREE.MeshPhongMaterial({ color: 0xa0adaf, shininess: 150 });
    ground = new THREE.Mesh(groundGeometry, groundMaterial);
    ground.rotation.x = -Math.PI/2
    ground.position.y = -1
    scene.add(ground)

    //object
    material = new THREE.MeshPhongMaterial({
        color: 0x80ee10,
        shininess: 100,
        // side:THREE.DoubleSide
    })
    const geometry = new THREE.TorusKnotGeometry(0.4, 0.08, 95, 20)
    object = new THREE.Mesh(geometry, material)
    scene.add(object)
}



function initLight(params) {
    scene.add(new THREE.AmbientLight(0x505050));

    spotLight = new THREE.SpotLight(0xffffff)
    spotLight.angle = Math.PI/5
    spotLight.penumbra = 0.3
    spotLight.position.set(2, 3, 2)
    scene.add(spotLight)

    dirLight = new THREE.DirectionalLight(0x55505a, 1)
    dirLight.position.set(0, 3, 0)
    scene.add(dirLight)
}

function initCamera(params) {
    camera = new THREE.PerspectiveCamera(46, window.innerWidth / window.innerHeight, 0.01, 1000)
    camera.position.set(0,0,4)
}

function initControls(params) {
    const controls = new OrbitControls(camera,renderer.domElement)
}

function enableShadow() {
    renderer.shadowMap.enabled = true;

    spotLight.castShadow = true;
    spotLight.shadow.camera.near = 3
    spotLight.shadow.camera.far = 10
    spotLight.shadow.mapSize.width = 1024
    spotLight.shadow.mapSize.height = 1024

    dirLight.castShadow = true;
    dirLight.shadow.camera.near = 1
    dirLight.shadow.camera.far = 10
    dirLight.shadow.camera.right = 1
    dirLight.shadow.camera.left = -1
    dirLight.shadow.camera.top = 1
    dirLight.shadow.camera.bottom = -1
    dirLight.shadow.mapSize.width = 1024
    dirLight.shadow.mapSize.height = 1024

    ground.receiveShadow = true
    object.castShadow = true

}

function enableClipping(params) {
    //做切割
    const plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), 0.2)

    //第二刀
    const plane2 = new THREE.Plane(new THREE.Vector3(-1, 0, 0), 0.2)

     //第三刀
    const plane3 = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
    
    //渲染器的刀 把场景都切割了
    renderer.clippingPlanes = [plane]
    
    //local clipping
    material.clippingPlanes = [plane,plane2,plane3]
    material.side = THREE.DoubleSide

    //让影子也具有时效性,影子也变成一半
    material.clipShadows = true
    renderer.localClippingEnabled = true
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
}
function animate() {
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
}
